<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <a-form ref="form" :model="mdl" :rules="rules" class="rx-a-form-vertical" layout="vertical">

                    <a-form-item name="name" :label="i18n('form.name','名称')">
                        <a-input :placeholder="i18n('form.name','名称')" v-model:value="mdl.name"/>
                    </a-form-item>
                    <a-form-item name="toUser" :label="i18n('form.agent','代理人')">
                        <rx-input-button :singleValue="false" @btnClick="selectUsers"
                                         v-model="mdl.toUser"></rx-input-button>
                    </a-form-item>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item name="type" :label="i18n('form.agentType','代理类型')">
                                <a-radio-group name="radioGroup" :placeholder="i18n('form.agentType','代理类型')"
                                               @change="changeType"
                                               v-model:value="mdl.type">
                                    <a-radio value="all">{{ i18n('form.all', '全部') }}</a-radio>
                                    <a-radio value="flowdef">{{ i18n('form.part', '部分') }}</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">

                            <a-form-item name="status" :label="i18n('form.status','状态')">
                                <a-radio-group name="radioGroup" :placeholder="i18n('form.status','状态')"
                                               v-model:value="mdl.status">
                                    <a-radio :value="1">{{ i18n('form.enable', '启动') }}</a-radio>
                                    <a-radio :value="0">{{ i18n('form.disable', '禁用') }}</a-radio>
                                </a-radio-group>
                            </a-form-item>

                        </a-col>
                    </a-row>




                    <a-row>
                        <a-col :span="12">
                            <a-form-item name="startTime" :label="i18n('form.startTime','开始时间')">
                                <a-date-picker :placeholder="i18n('form.startTime','开始时间')" :disabled-date="disabledDate" :locale="locale"
                                               v-model:value="mdl.startTime" format="YYYY-MM-DD"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item name="endTime" :label="i18n('form.endTime','结束时间')">
                                <a-date-picker :placeholder="i18n('form.endTime','结束时间')" v-model:value="mdl.endTime" :locale="locale"
                                               format="YYYY-MM-DD"/>
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <a-form-item name="describe" :label="i18n('form.describe','描述')">
                        <a-textarea :placeholder="i18n('form.describe','描述')" v-model:value="mdl.describe" :autosize="{minRows:4}"/>
                    </a-form-item>


                    <div v-if="type=='flowdef'">
                        <div class="table-operator" style="margin-bottom: 6px">
                            <a-button type="primary" @click="addSol">{{ i18n('list.addProcessBtn', '增加流程定义') }}
                            </a-button>
                            <a-button type="primary" @click="delSol" danger>{{ $ti18('rxList.delBtn', '删除') }}</a-button>
                        </div>
                        <div>
                            <a-table bordered :dataSource="bpmAgentFlowDefs" :columns="columns"
                                     :row-selection="rowSelection">
                            </a-table>
                        </div>
                    </div>

                </a-form>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxLayout, BaseFormModel} from '@lowcode/jpaas-base-lib'
import {ShareDialog} from '@lowcode/jpaas-share-component'
import DialogBox from "@/assets/js/dialogBox.js";
import BpmAgentApi from '@/common/api/bpm/bpmAgent'
import dayjs from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
export default {
    name: "BpmAgentEdit",
    mixins: [BaseFormModel],
    components: {
        RxLayout,
    },
    data() {
        return {
            locale,
            rules: {
                name: [{required: true, message: this.i18n('form.name','请输入名称','input'), trigger: 'change'}],
                type: [{required: true, message: this.i18n('form.agentType','请选择代理类型','select'), trigger: 'change'}],
                toUser: [{required: true, message:  this.i18n('form.agent','请选择代理人','select'), trigger: 'change'}],
                status: [{required: true, message:  this.i18n('form.status','请选择状态','select'), trigger: 'change'}],
                startTime: [{required: true, message:  this.i18n('form.startTime','请选择开始时间','select'), trigger: 'change'}],
                endTime: [{required: true, message:  this.i18n('form.endTime','请选择结束时间','select'), trigger: 'change'}],
            },
            columns: [
                {
                    title: this.i18n('processList.defId', '流程Id'),
                    dataIndex: 'defId',
                },
                {
                    title: this.i18n('processList.defName', '流程方案'),
                    dataIndex: 'defName',
                },
            ],
            bpmAgentFlowDefs: [],
            selectedRows: [],
            complexJson: {
                main: {
                    toUser: {text: "toUserName", value: "toUser"}
                }
            },
            type: "all"
        }
    },
    created() {
    },
    computed: {
        rowSelection() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    this.selectedRows = selectedRows;
                },
            };
        },
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "BpmAgent", key);
        },
        disabledDate(current) {
            // Can not select days before today and today
            return current && current < dayjs().subtract(1, 'days').endOf('day');
        },
        changeType(e) {
            this.type = e.target.value;
        },
        addSol() {
            var self = this;
            DialogBox.openBpmDefDialog({curVm: this}, function (data) {
                self.bpmAgentFlowDefs = data;
            })
        },
        delSol(e) {
            for (let i = 0; i < this.selectedRows.length; i++) {
                for (let j = 0; j < this.bpmAgentFlowDefs.length; j++) {
                    if (this.selectedRows[i].defId == this.bpmAgentFlowDefs[j].defId) {
                        this.bpmAgentFlowDefs.splice(j, 1);
                    }
                }
            }
        },

        selectUsers(vm) {
            let self = this;
            ShareDialog.openUserDialog({
                curVm: this, data: {single: true}, widthHeight: ['1200px', '600px']
            }, function (user) {
                var json = {label: user.fullName, value: user.userId};
                self.mdl.toUser = JSON.stringify(json);
            });
        },
        get(id) {
            return BpmAgentApi.get(id);
        },
        save(values) {
            values.startTime = values.startTime.format("YYYY-MM-DD");
            values.endTime = values.endTime.format("YYYY-MM-DD");
            if (values.type == "flowdef") {
                values.bpmAgentFlowDefs = this.bpmAgentFlowDefs;
            }
            return BpmAgentApi.save(values);
        },
        onload_(data) {

            if (!data) {
                this.mdl = {type: "all", status: 1};
                return;
            }
            this.type = data.type;
            this.bpmAgentFlowDefs = data.bpmAgentFlowDefs;
            data.startTime = dayjs(data.startTime);
            data.endTime = dayjs(data.endTime);
        }
    },


}
</script>

<style scoped>
.listSelectBox {
    display: flex;
}

.listCard {
    flex: 1;
    min-height: 32px;
    margin: 4px 10px 4px 0;
    padding: 0 4px;
    border: 1px solid #ddd;
    vertical-align: middle;
}

.listButton {
    margin: 4px 0;
}
</style>
